<template>
  <div class="language_page">
    <CommonHeader title="切换语言" />
    <div class="language_content page_no_tab_bar">
      <!-- 语言选项 -->
      <ul class="language_list">
        <li
          v-for="(item, index) in languageList"
          :key="index"
          @click="checkLanguage(item.value)"
        >
          <div>{{ item.label }}</div>
          <img
            v-if="curLanguge == item.value"
            src="@/assets/profile/settings/checked_icon.png"
            alt=""
          />
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import CommonHeader from "@/components/CommonHeader.vue";

// 当前语言
const curLanguge = ref("zh");

// 语言列表
const languageList = ref([
  { label: "中文简体", value: "zh" },
  { label: "中文繁体", value: "zh-tw" },
  { label: "English", value: "en" },
]);

// 切换语言
const checkLanguage = (value: string) => {
  curLanguge.value = value;
};
</script>

<style lang="scss" scoped>
.language_page {
  .language_content {
    padding-top: 10px;
    .language_list {
      li {
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
      }
    }
  }
}
</style>
